<template>
  <div>
    <van-nav-bar title="试题收藏" :style="rgba[0]" />
    <van-empty
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="还没收藏，赶紧去收藏吧"
      v-if="coll_list.length==0"
    />
    <div class="content">
      <!--收藏题目-->
      <div v-for="(localdata,j) of coll_list" :key="j">
        <div v-for="(item,i) of apidatas.all_quiz_list" :key="i">
          <template v-if="item.quiz_list_id==localdata.listId">
            <div class="content_num" @touchstart="start" @touchmove="move" @touchend="end(j)">
              <p class="titels">
                {{j+1+"."}}{{item.quiz_list[localdata.id].title}}
                <span>{{arry[item.quiz_list[localdata.id].answer]}}</span>
              </p>
              <div
                v-for="(arrs,num) of item.quiz_list[localdata.id].options"
                :key="num"
                class="choice"
              >{{arr[num]}}{{arrs}}</div>
              <div class="explain">
                <p>最佳解释:</p>
                <span>{{item.quiz_list[localdata.id].reason}}</span>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div style="height:50px;width:100%;background-color:#fff"></div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
//收藏
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("apiDataModules");
import Vue from 'vue';
import { Dialog } from 'vant';

// 全局注册
Vue.use(Dialog);

export default {
  name: "coll",
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      coll_list: Array,
      datas: {},
      arr: ["A、", "B、", "C、", "D、"],
      arry: ["A", "B", "C", "D"],
      longClick: 0,
      timeOutEvent: 0,
      num:0,
      rgba:{},
    };
  },
  created() {
    let colldata = JSON.parse(localStorage.getItem("sublist")) || [];
    this.coll_list = colldata;
    this.rgba = JSON.parse(localStorage.getItem("bakcColor"))
  },
  computed: {
    ...mapState(["apidatas"])
  },
  async mounted() {
    this.datas = this.apidatas;
  },
  methods: {
    start(e) {
      let _self = this
      this.timeOutEvent = setTimeout(() => {
        //长按取消
        Dialog.confirm({
          message: "确认删除?"
        })
          .then(() => {
            let bool = _self.coll_list.some((item,i)=>{
              if(this.num ==i){
                _self.coll_list.splice(i,1)
                return true
              }
            })
            if(bool){
              localStorage.setItem("sublist",JSON.stringify(_self.coll_list))
            }
          })
          .catch(() => {
            // on cancel
          });
      }, 2000);
      e.preventDefault();
    },
    move() {
      clearTimeout(this.timeOutEvent);
      this.timeOutEvent = 0;
    },
    end(j) {
      clearTimeout(this.timeOutEvent);
      if (this.timeOutEvent != 0) {
        console.log("这是点击");
        this.num = j
      }
      return false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/coll/coll.scss";
</style>